<template>
  <div v-if="hasPermission">
    <slot />
  </div>
  <div v-else-if="showFallback" class="text-center py-8">
    <div class="text-gray-500">
      <ExclamationTriangleIcon class="h-12 w-12 mx-auto mb-4 text-gray-300" />
      <p class="text-lg font-medium">权限不足</p>
      <p class="text-sm">您没有访问此功能的权限</p>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '@/stores/user'
import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'

const props = defineProps({
  // 允许的角色列表
  roles: {
    type: Array,
    default: () => []
  },
  // 是否显示无权限提示
  showFallback: {
    type: Boolean,
    default: true
  },
  // 自定义权限检查函数
  customCheck: {
    type: Function,
    default: null
  }
})

const userStore = useUserStore()

const hasPermission = computed(() => {
  // 如果有自定义检查函数，优先使用
  if (props.customCheck) {
    return props.customCheck(userStore.userInfo)
  }
  
  // 如果没有指定角色，默认允许访问
  if (!props.roles || props.roles.length === 0) {
    return true
  }
  
  // 检查用户角色
  return userStore.hasAnyRole(props.roles)
})
</script>
